<!-- eslint-disable -->
<template>
  <el-form :model="props.formItem" label-width="100" class="p-2 ">
    <el-form-item label="标签名称">
      <el-input v-model.trim="props.formItem.label" />
    </el-form-item>
    <el-form-item label="表单字段" required prop="field" >
      <el-input v-model.trim="props.formItem.field" />
    </el-form-item>
    <el-form-item label="栅格宽度">
      <el-input v-model.number="props.formItem.col" placeholder="默认24" />
    </el-form-item>
    <FormRulesConfig :form-item="props.formItem" />
    <el-form-item label="选项来源">
      <el-select v-model="props.formItem.optionsFrom" @change="(val)=>{changeOptionsFrom(val,props.formItem)}">
        <el-option label="静态数据" value="custom" />
<!--        <el-option label="前端api" value="frontendApi" />-->
        <el-option label="后端api" value="backendApi" />
        <el-option label="字典数据" value="dict" />
      </el-select>
    </el-form-item>
    <el-form-item label="前端定义Api" v-if="props.formItem.optionsFrom === 'frontendApi'">
      <el-input v-model="props.formItem.optionsApi" />
    </el-form-item>
    <el-form-item label="请求方式" v-if="props.formItem.optionsFrom === 'backendApi'">
      <el-select v-model="props.formItem.optionsApiType">
        <el-option label="GET" value="get" />
        <el-option label="POST" value="post" />
      </el-select>
    </el-form-item>
    <el-form-item label="接口名称" v-if="props.formItem.optionsFrom === 'backendApi'">
      <el-input v-model="props.formItem.optionsApi" />
    </el-form-item>
    <el-form-item label="是否立即请求" v-if="props.formItem.optionsFrom === 'backendApi' || props.formItem.optionsFrom === 'frontendApi'">
      <el-switch v-model="props.formItem.optionsImmediate" />
    </el-form-item>
    <el-form-item label="选项来源" v-if="props.formItem.optionsFrom === 'custom'">
      <div v-for="(item,index) in props.formItem.options" :key="index" class="flex gap-1 mb-1 group-last:mb-0">
        <el-input v-model="item.label" placeholder="请输入选项名称." class="w-1/2" />
        <el-input v-model="item.value" placeholder="请输入选项值." class="w-1/3" />
        <el-link type="danger" :underline="false" v-if="props.formItem.options" @click="props.formItem.options.splice(index,1)">删除</el-link>
      </div>
      <el-link type="primary" :underline="false" v-if="props.formItem.options" @click="props.formItem.options.push({label:'',value:''})">添加</el-link>
    </el-form-item>
    <el-form-item label="选项展示来源" v-if="props.formItem.props&&props.formItem.optionsFrom?.includes('Api')">
      <el-input v-model="props.formItem.props.label" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="选项值来源" v-if="props.formItem.props&&props.formItem.optionsFrom?.includes('Api')">
      <el-input v-model="props.formItem.props.value" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="选项字典类型" v-if="props.formItem.optionsFrom === 'dict'">
      <el-input v-model="props.formItem.dictType" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="是否可筛选">
      <el-switch v-model="props.formItem.filterable" />
    </el-form-item>
    <el-form-item label="是否可清除">
      <el-switch v-model="props.formItem.clearable" />
    </el-form-item>
    <el-form-item label="是否只读">
      <el-switch v-model="props.formItem.readonly" />
    </el-form-item>
    <el-form-item label="是否禁用">
      <el-switch v-model="props.formItem.disabled" />
    </el-form-item>
    <el-form-item label="是否在body下">
      <el-switch v-model="props.formItem.teleported" />
    </el-form-item>
    <el-form-item label="是否多选">
      <el-switch v-model="props.formItem.multiple" />
    </el-form-item>
    <el-form-item label="最多可以选择的数目" label-width="150" v-if="props.formItem.multiple">
      <el-input-number v-model="props.formItem.multipleLimit" :min="0" :max="Infinity" />
      ( 0代表不限制 )
    </el-form-item>
    <el-form-item label="是否收起多选值" label-width="150" v-if="props.formItem.multiple">
      <el-switch v-model="props.formItem.collapseTags" />
    </el-form-item>
    <el-form-item label="是否显示多选值" label-width="150" v-if="props.formItem.multiple">
      <el-switch v-model="props.formItem.collapseTagsTooltip" />
    </el-form-item>
    <el-form-item label="占位文字">
      <el-input v-model="props.formItem.placeholder" placeholder="请选择" />
    </el-form-item>
    <el-form-item label="样式类名">
      <el-input v-model="props.formItem.className" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="弹出窗类名">
      <el-input v-model="props.formItem.popperClass" placeholder="请输入" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts" name="Select">
import FormRulesConfig from './FormRulesConfig.vue'
const props = defineProps<{ formItem: SubmitFormSchema }>()
const changeOptionsFrom = (val, formItem: SubmitFormSchema) => {
  switch (val) {
    case 'custom': {
      formItem.options = [
        { label: '选项一', value: '1' },
        { label: '选项二', value: '2' }
      ]
      break
    }
    default: {
      formItem.options = []
      break
    }
  }
}
</script>
